<template>
  <div style="width: 1071px; margin-top: 10px; border: 2px solid #09a578">
    <div style="display: flex">
      <tbody style="margin-left: 10px">
        <tr>
          <td style="width: 100%">
            <table style="border-collapse: collapse;width: 100%; height: 110px;border-color: #09a578;margin-left: 5%;"
              border="1">
              <caption style="margin-top: 10px; margin-bottom: 20px; text-align: left">
                体成分检测结果
              </caption>
              <tbody>
                <tr style="height: 22px">
                  <td
                    style=" width: 12.5%; height: 40px; text-align: center;line-height: 1.5; background-color: rgb(42, 178, 139); color:#fff; ">
                    成分
                  </td>
                  <td
                    style=" width: 12.5%; height: 40px; text-align: center;line-height: 1.5; background-color: rgb(42, 178, 139); color:#fff; ">
                    测量值
                  </td>
                  <td
                    style=" width: 13.5%; height: 40px; text-align: center;line-height: 1.5; background-color: rgb(42, 178, 139); color:#fff; ">
                    细胞内液
                  </td>
                  <td
                    style=" width: 13.5%; height: 40px; text-align: center;line-height: 1.5; background-color: rgb(42, 178, 139); color:#fff; ">
                    细胞外液
                  </td>
                  <td
                    style=" width: 12.5%; height: 40px; text-align: center;line-height: 1.5; background-color: rgb(42, 178, 139); color:#fff; ">
                    总水分
                  </td>
                  <td
                    style=" width:12.5%; height: 40px; text-align: center;line-height: 1.5; background-color: rgb(42, 178, 139); color:#fff; ">
                    肌肉量
                  </td>
                  <td
                    style=" width:13.5%; height: 40px; text-align: center;line-height: 1.5; background-color: rgb(42, 178, 139); color:#fff; ">
                    去脂体重
                  </td>
                  <td
                    style=" width:100px; height: 40px; text-align: center;line-height: 1.5; background-color: rgb(42, 178, 139); color:#fff; ">
                    体重
                  </td>
                </tr>
                <tr style="height: 40px">
                  <td style="width: 12.5%; height: 40px; font-size: 16px;text-align:center;border-bottom: none;"></td>
                  <td style="width: 12.5%; height: 40px;font-size: 16px;text-align: center;border-bottom: none;">
                    <div></div>
                    <div></div>
                  </td>
                  <td style="width: 12.5%; height: 40px;font-size: 16px;text-align: center;border-top: none;">
                    <div>{{info.ICW?Math.floor( info.ICW* 100) / 100:'-'}}</div>
                    <div></div>
                  </td>
                  <td style="width: 12.5%; height: 40px;font-size: 16px;text-align: center;">
                    <div>{{info.ECW? Math.floor( info.ECW* 100) / 100:'-'  }}</div>
                    <div></div>
                  </td>
                  <td style="  width: 12.5%; height: 40px; font-size: 16px; text-align: center;border-left: none; " rowspan="2">
                    <div>{{info.Water? Math.floor( info.Water* 100) / 100:'-'}}</div>
                    <!-- <div>({{ info.WaterMin }}-{{ info.WaterMax }})</div> -->
                  </td>
                  <td style=" height: 40px; width: 12.5%; text-align: center;border-left: none;font-size: 16px;"
                    rowspan="3">
                    <!-- {{info.Muscle}} -->
                    <div>{{info.Muscle?Math.floor( info.Muscle* 100) / 100:'-'  }}</div>
                    <!-- <div>({{ info.MuscleMin }}~{{ info.MuscleMax }})</div> -->
                  </td>
                  <td style=" height: 40px; width: 12.5%; text-align: center;border-left: none;font-size: 16px;"
                    rowspan="4">
                    <div>{{info.LBM?Math.floor( info.LBM* 100) / 100:'-' }}</div>
                    <!-- <div>({{ info.MuscleMin }}~{{ info.MuscleMax }})</div> -->
                  </td>
                  <td style=" width: 13.4426%;height: 40px;border-left: none;text-align: center;font-size: 16px;"
                    rowspan="5">
                    <div>{{info.Weight? Math.floor( info.Weight* 100) / 100:'-' }}</div>
                    <!-- <div>({{ info.WeightMin }}~{{ info.WeightMax }})</div> -->
                  </td>
                </tr>
                <tr style="height: 40px">
                  <td style="width: 12.5%; height: 40px; font-size: 16px;text-align:center;border-top: none;margin-top: -20px;">
                    水分
                  </td>
                  <td style="width: 12.5%; height: 40px; text-align: center;font-size: 16px;border-top: none;">
                    <!-- {{info.ECW}} -->
                    <div>{{info.Water? Math.floor( info.Water* 100) / 100 :'-'}}</div>
                    <div></div>
                  </td>
                  <td style="width: 12.5%; height: 40px; text-align: center;font-size: 16px;border-top: none;border-right: none;">
                    <!-- {{info.ECW}} -->
                    <div></div>
                    <div></div>
                  </td>
                  <td style="width: 12.5%; height: 40px; text-align: center;font-size: 16px;border-top: none;border-right: none;border-left: none;">
                    <!-- {{info.ECW}} -->
                    <div></div>
                    <div></div>
                  </td>
                </tr>
                <tr style="height: 40px">
                  <td style=" width: 12.5%;height: 40px;font-size: 16px; text-align: center;">
                  蛋白质
                  </td>
                  <td style="width: 12.5%; height: 40px; text-align: center;font-size: 16px;" colspan="1">
                    <!-- {{info.Protein}} -->
                    <div>{{info.Protein? Math.floor( info.Protein* 100) / 100:'-'}}</div>
                    <div>({{ info.ProteinMin?info.ProteinMin:'-' }}~{{ info.ProteinMax?info.ProteinMax:'-' }})</div>
                  </td>
                </tr>
                <tr style="height: 40px">
                  <td style=" width: 12.5%;height: 40px;font-size: 16px;text-align: center;">
                    骨质
                  </td>
                  <td style="width: 12.5%; height: 40px;text-align:center;font-size: 16px;" colspan="1">
                    <!-- {{}} -->
                    <div>{{info.Bone? Math.floor( info.Bone* 100) / 100:'-' }}</div>
                    <div>({{ info.BoneMin? info.BoneMin:'-' }}~{{ info.BoneMax?info.BoneMax:'-' }})</div>
                  </td>
                  <td style=" width: 12.5%;height: 40px;font-size: 16px;text-align: center;border-right: none;"
                    colspan="4"></td>
                </tr>
                <tr>
                  <td style=" width: 12.5%;height: 40px;font-size: 16px; text-align: center;">
                  脂肪
                  </td>
                  <td style="width: 12.5%; height: 40px;text-align:center;font-size: 16px;" colspan="1">
                    <div>{{info.Fat? Math.floor( info.Fat* 100) / 100 :'-' }}</div>
                    <div>({{ info.FatMin?info.FatMin:'-' }}~{{ info.FatMax?info.FatMax:'-' }})</div>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
          <td style="width: 48.4251%"></td>
        </tr>
      </tbody>
      <div>
        <!-- <img src="../assets/img/tutu.jpg" alt=""> -->
        <div id="analMan">

          <div id="imgFat">
            脂肪 {{info.Fat? Math.floor( info.Fat* 100) / 100:'-'}} ({{ info.FatMin?info.FatMin:'-' }}~{{ info.FatMax?info.FatMax:'-' }})
          </div>
          <div id="imgBone">
            骨质 {{info.Bone?  Math.floor( info.Bone* 100) / 100:'-'}} ({{ info.BoneMin?info.BoneMin:'-' }}~{{ info.BoneMax?info.BoneMax:'-' }})
          </div>
          <div id="imgProtein">
            蛋白质 {{info.Protein?  Math.floor( info.Protein* 100) / 100 :'-'}} ({{ info.ProteinMin?info.ProteinMin:'-' }}~{{ info.ProteinMax?info.ProteinMax:'-' }})
          </div>
          <div id="imgWater">
            水分 {{info.Water? Math.floor( info.Water* 100) / 100:'-'}} ({{ info.WaterMin?info.WaterMin:'-' }}~{{ info.WaterMax?info.WaterMax:'-' }})
          </div>
        </div>
      </div>
    </div>
    <div style="width:93%;border:1px solid #09a578;margin:20px auto;text-align:center">
      <div style="display:flex;">
        <div class="biao1">测评指标</div>
        <div class="biao1">状态</div>
        <div class="biao1">测评信息</div>
        <div class="biao1">正常范围</div>
      </div>
      <div style="display:flex">
        <div class="biao1">体重</div>
        <div class="biao2" :class="[info.Weightcolor]"> {{ info.Weightkeyword?info.Weightkeyword:'-' }}</div>
        <div class="biao2" :class="[info.Weightcolor]"> {{contents.weight ? Math.floor(contents.weight* 100) / 100 + 'kg' :'-'}}</div>
        <div class="biao4" :class="[info.Weightcolor]"> {{ info.WeightMin && info.WeightMax ? info.WeightMin + '~' + info.WeightMax :'-' }}</div>
      </div>
      <div style="display:flex">
        <div class="biao1">肌肉</div>
        <div class="biao2" :class="[info.Musclecolor]"> {{ info.Musclekeyword?info.Musclekeyword:'-' }}</div>
        <div class="biao2" :class="[info.Musclecolor]"> {{info.Muscle ? Math.floor( info.Muscle * 100) / 100 + 'kg' :'-'}}</div>
        <div class="biao4" :class="[info.Musclecolor]"> {{ info.MuscleMin &&  info.MuscleMax? info.MuscleMin + '~' + info.MuscleMax :'-'}}</div>
      </div>
      <div style="display:flex">
        <div class="biao1">体脂百分比</div>
        <div class="biao2" :class="[info.PBFcolor]"> {{ info.PBFkeyword?info.PBFkeyword:'-' }}</div>
        <div class="biao2" :class="[info.PBFcolor]">{{ info.PBF?Math.floor( info.PBF * 100) / 100 + '%' :'-' }}</div>
        <div class="biao4" :class="[info.PBFcolor]"> {{ info.PBFMin && info.PBFMax ? info.PBFMin + '~' + info.PBFMax :'-'}}</div>
      </div>
      <div style="display:flex">
        <div class="biao1">骨质</div>
        <div class="biao2" :class="[info.Bonecolor]"> {{ info.Bonekeyword ?info.Bonekeyword:'-' }}</div>
        <div class="biao2" :class="[info.Bonecolor]"> {{info.Bone? Math.floor( info.Bone * 100) / 100+'kg' :'-' }}</div>
        <div class="biao4" :class="[info.Bonecolor]"> {{ info.BoneMin && info.BoneMax ? info.BoneMin + '~' + info.BoneMax :'-'}}</div>
      </div>
      <div style="display:flex">
        <div class="biao1">水分</div>
        <div class="biao2" :class="[info.Watercolor]"> {{ info.Waterkeyword?info.Waterkeyword:'-' }}</div>
        <div class="biao2" :class="[info.Watercolor]">{{ info.Water?Math.floor( info.Water * 100) / 100 + '%' :'-'}}</div>
        <div class="biao4" :class="[info.Watercolor]"> {{ info.WaterMin && info.WaterMax? info.WaterMin + '~' + info.WaterMax:'-' }}</div>
      </div>
      <div style="display:flex">
        <div class="biao1">骨骼肌</div>
        <div class="biao2" :class="[info.SMMcolor]"> {{ info.SMMkeyword?info.SMMkeyword:'-' }}</div>
        <div class="biao2" :class="[info.SMMcolor]"> {{info.SMM?Math.floor( info.SMM * 100) / 100+'kg':'-'}}</div>
        <div class="biao4" :class="[info.SMMcolor]"> {{ info.SMMMin && info.SMMMax ? info.SMMMin + '~' + info.SMMMax :'-'}}</div>
      </div>
      <div style="display:flex">
        <div class="biao1">体质指数</div>
        <div class="biao2" :class="[info.BMIcolor]"> {{ info.BMIkeyword ?info.BMIkeyword:'-' }}</div>
        <div class="biao2" :class="[info.BMIcolor]"> {{info.BMI? Math.floor( info.BMI * 100) / 100 + 'kg' :'-'}}</div>
        <div class="biao4" :class="[info.BMIcolor]"> {{ info.BMIMin && info.BMIMax? info.BMIMin + '~' + info.BMIMax :'-' }}</div>
      </div>
      <div style="display:flex">
        <div class="biao5">腰臀比</div>
        <div class="biao6" :class="[info.WHRcolor]"> {{ info.WHRkeyword?info.WHRkeyword:'-' }}</div>
        <div class="biao6" :class="[info.WHRcolor]"> {{info.WHR? Math.floor( info.WHR * 100) / 100 +'kg' :'-'}}</div>
        <div class="biao7" :class="[info.WHRcolor]"> {{ info.WHRMin && info.WHRMax? info.WHRMin + '~' + info.WHRMax :'-' }}</div>
      </div>
    </div>
    <div style="width:93%;margin:20px auto;text-align:center;display:flex; justify-content: space-between;">
      <div style="width:300px;border:1px solid #09a578">
        <div style="display:flex">
          <div class="biao1" style="width:50%;">躯干脂肪量</div>
          <div class="biao4" style="width:50%;">{{ info.TR_fat }}</div>
        </div>
        <div style="display:flex">
          <div class="biao1" style="width:50%;">左上肢脂肪</div>
          <div class="biao4" style="width:50%;"> {{ info.LA_fat }}</div>
        </div>
        <div style="display:flex">
          <div class="biao1" style="width:50%;">右上肢脂肪</div>
          <div class="biao4" style="width:50%;"> {{ info.RA_fat }}</div>
        </div>
        <div style="display:flex">
          <div class="biao1" style="width:50%;">左下肢脂肪</div>
          <div class="biao4" style="width:50%;"> {{ info.LL_fat }}</div>
        </div>
        <div style="display:flex">
          <div class="biao5" style="width:50%;">右下肢脂肪</div>
          <div class="biao7" style="width:50%;"> {{ info.RL_fat }}</div>
        </div>
      </div>
      <div style="width:300px;border:1px solid #09a578">
        <div style="display:flex">
          <div class="biao1" style="width:50%;">躯干水分量</div>
          <div class="biao4" style="width:50%;">{{ info.deviceType =='BCA-1B' ? info.TR_water:'-'}}</div>
        </div>
        <div style="display:flex">
          <div class="biao1" style="width:50%;">左上肢水分</div>
          <div class="biao4" style="width:50%;"> {{info.deviceType =='BCA-1B' ? info.LA_water:'-'  }}</div>
        </div>
        <div style="display:flex">
          <div class="biao1" style="width:50%;">右上肢水分</div>
          <div class="biao4" style="width:50%;"> {{ info.deviceType =='BCA-1B' ? info.RA_water:'-'   }}</div>
        </div>
        <div style="display:flex">
          <div class="biao1" style="width:50%;">左下肢水分</div>
          <div class="biao4" style="width:50%;"> {{ info.deviceType =='BCA-1B' ? info.LL_water:'-'  }}</div>
        </div>
        <div style="display:flex">
          <div class="biao5" style="width:50%;">右下肢水分</div>
          <div class="biao7" style="width:50%;"> {{ info.deviceType =='BCA-1B' ? info.RL_water:'-'   }}</div>
        </div>
      </div>
      <div style="width:300px;border:1px solid #09a578">
        <div style="display:flex">
          <div class="biao1" style="width:50%;">躯干肌肉量</div>
          <div class="biao4" style="width:50%;">{{  info.deviceType =='BCA-1B' ? '-' : info.TR_muscle  }}</div>
        </div>
        <div style="display:flex">
          <div class="biao1" style="width:50%;">左上肢肌肉</div>
          <div class="biao4" style="width:50%;"> {{ info.deviceType =='BCA-1B' ? '-' : info.LA_muscle   }}</div>
        </div>
        <div style="display:flex">
          <div class="biao1" style="width:50%;">右上肢肌肉</div>
          <div class="biao4" style="width:50%;"> {{ info.deviceType =='BCA-1B' ? '-' :  info.RA_muscle }}</div>
        </div>
        <div style="display:flex">
          <div class="biao1" style="width:50%;">左下肢肌肉</div>
          <div class="biao4" style="width:50%;"> {{ info.deviceType =='BCA-1B' ? '-' :  info.LL_muscle }}</div>
        </div>
        <div style="display:flex">
          <div class="biao5" style="width:50%;">右下肢肌肉</div>
          <div class="biao7" style="width:50%;"> {{ info.deviceType =='BCA-1B' ? '-' :  info.RL_muscle }}</div>
        </div>
      </div>
    </div>

    <div style="
            width: 93%;
            height: 70px;
            border: 2px solid #09a578;
            margin: auto;
            margin-top: 20px;
            display: flex;
            margin-bottom:20px
          ">
      <div style="
              background-color: rgb(42, 178, 139);
              width: 20%;
              text-align: center;
              line-height: 70px;
              border-right: 2px solid #09a578;
              color:#fff;
            ">
        内脏脂肪分析
      </div>
      <div style="width: 100%">
        <div style="margin-top: 2px; margin-bottom: 3px">
          <span style="margin-left: 40px">{{ info.VFIMin }}</span><span style="margin-left: 180px">{{ info.VFIMax
          }}</span>
        </div>
        <div style="display: flex">
          <div style="
                  width: 70%;
                  height: 20px;
                  background-color:#2ab28b;
                  border-bottom-right-radius: 10px;
                  border-top-right-radius: 10px;
                "></div>
          <div style="margin-left: 20px; color: #09a578">{{ info.VFI }}</div>
        </div>
        <div style="margin-top: 3px">
          <span style="margin-left: 40px">最小值</span><span style="margin-left: 150px">最大值</span>
        </div>
      </div>
    </div>
  </div>
    <!-- 儿童体质测评分析报告单 -->
    <div style="width: 100%; height: 40px; background-color: #2AB28B; margin-top: 10px; display: flex;" v-if="info.WeightMin||info.WeightMax">
      <div><img src="../.././assets/img/12.jpg" style="height: 40px" alt="" /></div>
      <div style="font-size: 20px; margin-left: 10px; line-height: 40px; color: #fff;">儿童体质测评分析报告解析</div>
    </div>
  <div style="border: 1px solid #09a578;padding:10px 10px;margin-top: 10px;font-size: 16px;" v-if="info.WeightMin||info.WeightMax">
    <div v-if="contents.weight">1、{{Math.floor(contents.weight* 100) / 100<info.WeightMin ? '您的体重偏低，可适当增加饮食营养和热量。如长期偏低，请向医生咨询。':Math.floor(contents.weight* 100) / 100 > info.WeightMax ? '您的体重超标，请注意减重。体重过高，是高血压、心脏病、糖尿病等多种疾病的风险因素。':'您的体重正常，请保持。'}} </div>
    <div v-if="info.Muscle">2、{{Math.floor( info.Muscle* 100) / 100 <info.MuscleMin ? '您的肌肉含量偏低，请注意加强力量练习，适当增加饮食中蛋白质比例。肌肉不但是人体运动的基础，而且肌肉收缩有助于血液回流，是保持心脏健康的条件之一。同时，肌肉代谢旺盛，有助于避免热量过多导致的肥胖。': Math.floor( info.Muscle* 100) / 100 > info.MuscleMax ? '您的肌肉发达，是良好现象，请保持。':'您的肌肉含量正常，请保持。' }}</div>
    <div v-if="info.Bone">3、{{Math.floor( info.Bone* 100) / 100 <info.BoneMin ? '骨质是全身骨骼总量的总和。您的骨质偏低，提示骨骼在身体中的比重偏轻，如果是体重超重引起，减肥即可恢复骨质比例。如果不超重，请进一步检查是否骨质偏低。饮食中可增加钙的摄入。': Math.floor( info.Bone* 100) / 100 > info.BoneMax ? '骨质是全身骨骼总量的总和。您骨质较高，如系体重较轻所致，请适当增加体重。如不是，则提示您骨骼密度大，不用担心。':'骨质是全身骨骼总量的总和。由于骨骼占全身无机盐总量的99%以上，也可作为无机盐总量的指标。您骨质正常，请保持。' }}</div>
    <div v-if="info.Water">4、{{Math.floor( info.Water* 100) / 100 <info.WaterMin ? '您的总水分偏低。请注意充足饮水。如果您脂肪超标，请适当减脂。脂肪中含水少，因此会导致您总水分比例偏低。降低脂肪含量会提升水分比例。如果总水分偏低，一方面说明您平时喝水可能不足，另一方面可能意味着您肌肉偏少、脂肪偏多。': Math.floor( info.Water* 100) / 100 > info.WaterMax ? '您体内的总水分超标。体内有过多的水会增加肾脏系统负担，同时提示水分代谢异常。请结合水肿系数观察您是否有水肿现象。':'您的总水分正常。' }}</div>
    <div v-if="info.SMM">5、{{Math.floor( info.SMM* 100) / 100 <info.SMMMin ? '您的骨骼肌偏低，请注意加强锻炼，尤其是力量练习。骨骼肌一般附着于骨骼之上，其伸缩带动骨骼移动，从而促成人体的运动，是运动能力的保证，也是塑造形体的重要因素。': Math.floor( info.SMM* 100) / 100 > info.SMMMax ? '你的骨骼肌发达，赞一个，请保持。骨骼肌一般附着于骨骼之上，其伸缩带动骨骼移动，从而促成人体的运动，是运动能力的保证，也是塑造形体的重要因素。':'骨骼肌一般附着于骨骼之上，其伸缩带动骨骼移动，从而促成人体的运动，是运动能力的保证，也是塑造形体的重要因素。您的骨骼肌正常，请保持。'}}</div>
    <div v-if="info.PBF">6、{{Math.floor( info.PBF* 100) / 100 <info.PBFMin ? '您体内脂肪含量偏低，脂肪是人体的基础营养成分和能量来源之一，对维系新陈代谢和体温正常都有重要意义。维持脂肪含量的正常是保持健康的条件之一。请适当增加饮食中脂肪的含量。如长期偏低，请去医院检查。' : Math.floor( info.PBF* 100) / 100 > info.PBFMax ? '您体内脂肪超标。脂肪是人体的基础营养成分之一，维持脂肪含量的正常是保持健康的条件之一。脂肪偏高，不仅是肥胖的表现，也会带来高血压、糖尿病、心脑血管疾病等一系列健康风险。减少高脂饮食的摄入，增加运动，会帮助您降低脂肪含量。':'您体内脂肪含量正常，请保持。脂肪是人体的基础营养成分之一，维持脂肪含量的正常是保持健康的条件之一。'}}</div>
    <div v-if="info.BMI">7、{{Math.floor( info.BMI* 100) / 100 <info.BMIMin ? 'BMI即体质指数。体质指数是普遍使用的反映胖瘦的经验公式。由体重和身高的比例决定。您的BMI偏低提示体型消瘦。' :Math.floor( info.BMI* 100) / 100 > info.BMIMax ?'BMI即体质指数。体质指数是普遍使用的反映胖瘦的经验公式。由体重和身高的比例决定。您的BMI偏高提示体重超标。请结合肌肉和体脂率评价如肌肉发达、体脂率不高则是肌肉型超重是身体强壮的表现。':'BMI即体质指数。体质指数是普遍使用的反映胖瘦的经验公式。由体重和身高的比例决定。您的BMI正常提示体型正常。'}}</div>
    <div v-if="info.WHR">8、{{Math.floor( info.WHR* 100) / 100 <info.WHRMin ? '腰围与臀围的比例，能显示体型和脂肪堆积的部位。您的腰臀比较小，说明属于梨型体型，心脑血管疾病风险低。': Math.floor( info.WHR* 100) / 100 > info.WHRMax ? '腰围与臀围的比例，能显示体型和脂肪堆积的部位。您的腰臀比较高，属于苹果型体型。苹果型的人（腰臀比较大）比梨型的人（腰臀比较小）有更大的健康风险。苹果型体型患心脏病及糖尿病等疾病的风险比其他人群要大很多。':'腰围与臀围的比例，能显示体型和脂肪堆积的部位。这是通过电阻抗推算的，与实际用卷尺度量会有一定误差，仅供参考。'}}</div>
  </div>
</template>

<script setup>
import { defineComponent, onMounted, ref, watch, reactive } from 'vue'
import { ElMessage } from "element-plus";
import http from "../../utils/http";
import { useRoute, useRouter } from "vue-router"
import BodyComposition from '../../utils/BodyComposition';
const route = useRoute()
const router = useRouter()
const labName = ref()
const groupId = ref()
const id = ref()
const reportId = ref()
const username = ref()
const guardian = ref()
const birth = ref()

const onBmishow = ref(1)
const info = ref({});
const fatHigh = ref(false)
const fatNormal = ref(false)
const fatLow = ref(false)
const WaistHigh = ref(false)
const WaistNormal = ref(false)
const WaistLow = ref(false)
const EdemaHigh = ref(false)
const EdemaNormal = ref(false)
const EdemaLow = ref(false)
const proteinHigh = ref(false)
const proteinNormal = ref(false)
const proteinLow = ref(false)
const FatHigh = ref(false)
const FatNormal = ref(false)
const FatLow = ref(false)
const contents = ref({})
const FatHighNormal = ref(true)
const Member=ref({})
const onHome = async () => {
  await router.push({ 'path': '/Home' })
}

const fetchData = async () => {
  if (route.params.groupId) {
    groupId.value = route.params.groupId
    id.value = route.params.id
    reportId.value = route.params.reportId

    username.value = route.params.username
    guardian.value = route.params.guardian
    birth.value = route.params.birth
    if (groupId.value === 3) {
      labName.value = '婴幼儿营养测评'
    } else if (groupId.value === 5) {
      labName.value = '孕产妇营养测评'
    } else if (groupId.value === 6) {
      labName.value = '成年人营养测评'
    } else if (groupId.value === 7) {
      labName.value = '慢性病营养测评'
    } else {
      labName.value = '婴幼儿营养测评'
    }

    http.get('api/archives/viewReportMember?id=' + reportId.value + '&username=' + username.value + '&guardian=' + guardian.value + '&birth=' + birth.value).then((res) => {
      contents.value = res.data.data.contents;
      Member.value=res.data.data;
      localStorage.setItem('userinfo',JSON.stringify(res.data.data.contents))


      http.get('api/report/getreport?id=' + id.value + '&reportId=' + reportId.value + '&username=' + username.value + '&guardian=' + guardian.value + '&birth=' + birth.value).then((res) => {
      if (res.data.code === 0) {
        ElMessage.error(res.data.msg)
        return false;
      }
      // console.log(res.data.data,'456123')
      let MemCompotion= BodyComposition(res.data.data.component,Member.value);
      let data = res.data.data.component;
      info.value.Fat = data.Fat;
      info.value.TR_muscle=data.TR_muscle;
      info.value.FatMin = data.FatMin;
      info.value.FatMax = data.FatMax;
      info.value.LA_fat = data.LA_fat;
      info.value.TR_water=data.TR_water;
      info.value.deviceType=data.deviceType;
      info.value.TR_fat=data.TR_fat;
      info.value.RA_fat = data.RA_fat;
      info.value.LL_fat = data.LL_fat;
      info.value.RL_fat = data.RL_fat;
      info.value.LA_water = data.LA_water;
      info.value.RA_water = data.RA_water;
      info.value.LL_water = data.LL_water;
      info.value.RL_water = data.RL_water;
      info.value.LA_muscle = data.LA_muscle;
      info.value.RA_muscle = data.RA_muscle;
      info.value.LL_muscle = data.LL_muscle;
      info.value.RL_muscle = data.RL_muscle;

      info.value.Bone = data.Bone;
      info.value.BoneMin = data.BoneMin;
      info.value.BoneMax = data.BoneMax;

      info.value.Protein = data.Protein;
      info.value.ProteinMin = data.ProteinMin;
      info.value.ProteinMax = data.ProteinMax;

      info.value.Water = data.Water;
      info.value.WaterMin = data.WaterMin;
      info.value.WaterMax = data.WaterMax;

      info.value.Weight = data.Weight;
      info.value.WeightMin = data.WeightMin;
      info.value.WeightMax = data.WeightMax;

      info.value.LBM = data.LBM;
      info.value.LBMMin = data.LBMMin;
      info.value.LBMMax = data.LBMMax;

      info.value.Muscle = data.Muscle;
      info.value.MuscleMin = data.MuscleMin;
      info.value.MuscleMax = data.MuscleMax;

      info.value.ICW = data.ICW;
      info.value.ICWMin = data.ICWMin;
      info.value.ICWMax = data.ICWMax;

      info.value.PBF = data.PBF;
      info.value.PBFMin = data.PBFMin;
      info.value.PBFMax = data.PBFMax;

      info.value.SMM = data.SMM;
      info.value.SMMMin = data.SMMMin;
      info.value.SMMMax = data.SMMMax;

      info.value.BMI = data.BMI;
      info.value.BMIMin = data.BMIMin;
      info.value.BMIMax = data.BMIMax;

      info.value.WHR = data.WHR;
      info.value.WHRMin = data.WHRMin;
      info.value.WHRMax = data.WHRMax;

      info.value.Weight_control = data.Weight_control;
      info.value.Fat_control = data.Fat_control;
      info.value.Muscle_control = data.Muscle_control;
      // 内脏指数
      info.value.VFI = data.VFI;
      info.value.VFIMin = data.VFIMin;
      info.value.VFIMax = data.VFIMax;
      // 水中系数
      info.value.Edema = data.Edema;
      info.value.EdemaMin = data.EdemaMin;
      info.value.EdemaMax = data.EdemaMax;
      // 细胞外液
      info.value.ECW = data.ECW;
      // 基础代谢
      info.value.BMR = data.BMR;
      // 身体水分率
      //info.value.Water = (data.Water * 100).toFixed(2);
      if (data.PBF < data.PBFMin) {
        fatHigh.value = true;
      } else if (data.PBF >= data.PBFMin && data.PBF <= data.PBFMax) {
        fatNormal.value = true;
      } else if (data.PBF > data.PBFMax) {
        fatLow.value = true;
      }

      if (data.WHR < data.WHRMin) {
        WaistHigh.value = true;
      } else if (data.WHR >= data.WHRMin && data.WHR <= data.WHRMax) {
        WaistNormal.value = true;
      } else if (data.WHR > data.WHRMax) {
        WaistLow.value = true;
      }
      // 水肿指标
      if (data.Edema < data.EdemaMin) {
        EdemaHigh.value = true;
      } else if (data.Edema >= data.EdemaMin && data.Edema <= data.EdemaMax) {
        EdemaNormal.value = true;
      } else if (data.Edema > data.EdemaMax) {
        EdemaLow.value = true;
      }
      // 蛋白质
      if (data.Protein < data.ProteinMin) {
        proteinHigh.value = true;
      } else if (data.Protein >= data.ProteinMin && data.Protein <= data.ProteinMax) {
        proteinNormal.value = true;
      } else if (data.Protein > data.ProteinMax) {
        proteinLow.value = true;
      }
      //脂肪
      if (data.Fat < data.FatMin) {
        FatHigh.value = true;
      } else if (data.Fat >= data.FatMin && data.Protein <= data.FatMax) {
        FatNormal.value = true;
      } else if (data.Fat > data.FatMax) {
        FatLow.value = true;
      }
      

      // 处理指标参数
      info.value.Weightkeyword = '✔ 正常';
      info.value.Weightcolor = 'everyBlack';
      if (Number(contents.value.weight) < Number(data.WeightMin)) {
        info.value.Weightkeyword = '▼ 不足';
        info.value.Weightcolor = 'everyRed';
      } else if (Number(contents.value.weight) > Number(data.WeightMax)) {
        info.value.Weightkeyword = '▲ 超标';
        info.value.Weightcolor = 'everyOrange';
      }

      info.value.Musclekeyword = '✔ 正常';
      info.value.Musclecolor = 'everyBlack';
      if (Number(data.Muscle) < Number(data.MuscleMin)) {
        info.value.Musclekeyword = '▼ 不足';
        info.value.Musclecolor = 'everyRed';
      } else if (Number(data.Muscle) > Number(data.MuscleMax)) {
        info.value.Musclekeyword = '▲ 超标';
        info.value.Musclecolor = 'everyOrange';
      }

      info.value.PBFkeyword = '✔ 正常';
      info.value.PBFcolor = 'everyBlack';
      if (Number(data.PBF) < Number(data.PBFMin)) {
        info.value.PBFkeyword = '▼ 不足';
        info.value.PBFcolor = 'everyRed';
      } else if (Number(data.PBF) > Number(data.PBFMax)) {
        info.value.PBFkeyword = '▲ 超标';
        info.value.PBFcolor = 'everyOrange';
      }

      info.value.Bonekeyword = '✔ 正常';
      info.value.Bonecolor = 'everyBlack';
      if (Number(data.Bone) < Number(data.BoneMin)) {
        info.value.Bonekeyword = '▼ 不足';
        info.value.Bonecolor = 'everyRed';
      } else if (Number(data.Bone) >  Number(data.BoneMax)) {
        info.value.Bonekeyword = '▲ 超标';
        info.value.Bonecolor = 'everyOrange';
      }

      info.value.Waterkeyword = '✔ 正常';
      info.value.Watercolor = 'everyBlack';
      if (Number(data.Water) < Number(data.WaterMin) ) {
        info.value.Waterkeyword = '▼ 不足';
        info.value.Watercolor = 'everyRed';
      } else if (Number(data.Water) > Number(data.WaterMax)) {
        info.value.Waterkeyword = '▲ 超标';
        info.value.Watercolor = 'everyOrange';
      }

      info.value.SMMkeyword = '✔ 正常';
      info.value.SMMcolor = 'everyBlack';
      if (Number(data.SMM)  < Number(data.SMMMin)) {
        info.value.SMMkeyword = '▼ 不足';
        info.value.SMMcolor = 'everyRed';
      } else if (Number(data.SMM) > Number(data.SMMMax)) {
        info.value.SMMkeyword = '▲ 超标';
        info.value.SMMcolor = 'everyOrange';
      }

      info.value.BMIkeyword = '✔ 正常';
      info.value.BMIcolor = 'everyBlack';
      if (Number(data.BMI) < Number(data.BMIMin)) {
        info.value.BMIkeyword = '▼ 不足';
        info.value.BMIcolor = 'everyRed';
      } else if (Number(data.BMI) > Number(data.BMIMax)) {
        info.value.BMIkeyword = '▲ 超标';
        info.value.BMIcolor = 'everyOrange';
      }

      info.value.WHRkeyword = '✔ 正常';
      info.value.WHRcolor = 'everyBlack';
      if (Number(data.WHR )< Number(data.WHRMin)) {
        info.value.WHRkeyword = '▼ 不足';
        info.value.WHRcolor = 'everyRed';
      } else if (Number(data.WHR) > Number( data.WHRMax)) {
        info.value.WHRkeyword = '▲ 超标';
        info.value.WHRcolor = 'everyOrange';
      }




      // const  EdemaHigh = ref(false)
      // const  EdemaNormal = ref(false)
      // const  EdemaLow = ref(false)

    })
    })



   
  } else {
    ElMessage.error('栏目编号不得为空')
    await router.push({ 'path': '/Home' })
  }
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
#analMan {
  margin-top: 2%;
  text-align: center;
  color: #fff;
  width: 60%;
  float: left;

}

#analMan #imgMan {
  float: left;
}

#analMan #imgFat {
  margin-left: 33%;
  width: 379px;
  height: 35px;
  line-height: 35px;
  background: #E88F73;
  opacity: 1;
}

#analMan #imgBone {
  margin-left: 33%;
  width: 379px;
  height: 53px;
  line-height: 53px;
  background: #B1D964;
  opacity: 1;
}

#analMan #imgProtein {
  margin-left: 33%;
  width: 379px;
  height: 53px;
  line-height: 53px;
  background: #E8BA73;
  opacity: 1;
}

#analMan #imgWater {
  margin-left: 33%;
  width: 379px;
  height: 193px;
  line-height: 193px;
  background: #6BA9E4;
  opacity: 1;
}

#BasicAssessment .bt {
  background: #F7F7F7;
  color: #fff;
}

#BasicAssessment .bt span {
  width: 25%;
  float: left;
  text-align: center;
  color: #999999;
  line-height: 30px;
}

#BasicAssessment ul li {
  width: 100%;
  display: inline-block;
  margin: 0;
}

#BasicAssessment .element span {
  width: 25%;
  float: left;
  text-align: center;
  line-height: 50px;
}

#WeightAssessment {
  width: 30%;
}

#Obesity {
  background: url('../../assets/img/analysis_man_right_round.png');
  width: 122px;
  height: 122px;
  color: #fff;
  font-size: 16px;
  margin-left: 10%;

}

#ObesityContent {
  margin-left: 50%;
}

#ObesityRight {
  float: left;
  width: 35%;
  margin-left: 5%;
}

#ObesityRight ul li {
  border: 1px solid #eee;
  width: 310px;
  height: 55px;
  font-size: 18px;
  color: #999999;
  background: #F7F7F7;
  line-height: 55px;
  list-style-type: none;
  text-align: right;
  margin-left: -30px;
}

#ObesityRight ul .weight_run {}

#ObesityRight ul li .weight_param {
  color: #333333;
  padding-right: 30%;
}

#Obesity #ObesityFat {
  float: left;
  margin-top: 45%;
  margin-left: 20%;
}

#Obesity #ObesityProtein {
  margin-top: 25%;
  margin-left: 60%;
}

.analysis_waist {
  float: left;
  width: 33%;
}

.fen {
  width: 129%;
  height: 30px;
  box-sizing: border-box;
  margin-top: 30px;
  margin-left: -15%;
}

.fenss {
  text-align: center;
}

#viscus {
  margin-top: 9px;
  margin-left: 5.5%;
  color: #333333;
  font-size: 18px;
  width: 100%;
}

.ViscusNumber {
  font-size: 50px;
  color: #E8B973;
}

.ViscusType {
  font-size: 16px;
  color: #fff;
  width: 100px;
  height: 68px;
  border-radius: 30px;
  background: #E8B973;
  padding: 0 20px;
  margin-left: 20px;
}

.ViscusNormal {
  font-size: 16px;
  color: #fff;
  width: 100px;
  height: 68px;
  border-radius: 30px;
  background: green;
  padding: 0 20px;
  margin-left: 20px;
}

.ViscusLow {
  font-size: 16px;
  color: #fff;
  width: 100px;
  height: 68px;
  border-radius: 30px;
  background: red;
  padding: 0 20px;
  margin-left: 20px;
}

.fen .fenssNumber {
  width: 100%;
}

.fen .fenssNumber .six {
  width: 2%;
  text-align: left;
  color: #999999;
  font-size: 14px;
}

.fen .fenssNumber span {
  width: 32.33%;
  float: left;
  text-align: right;
  color: #999999;
  font-size: 14px;
}

.Intracellular {
  position: absolute;
  margin-top: 40px;
  margin-left: 80px;
  width: 55px;
  height: 59px;
  font-size: 16px;
  color: #fff;
  -moz-transform: rotate(-70deg);
  -webkit-transform: rotate(-70deg);
  display: block;
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
}

.ECF {
  position: absolute;
  margin-top: 17px;
  margin-left: 179px;
  width: 55px;
  height: 59px;
  font-size: 16px;
  color: #fff;
  -moz-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  display: block;
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
}

.other {
  position: absolute;
  margin-top: 160px;
  margin-left: 209px;
  width: 55px;
  height: 59px;
  font-size: 16px;
  color: #fff;
  -moz-transform: rotate(-40deg);
  -webkit-transform: rotate(-40deg);
  display: block;
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
}

.BodyMoisture {
  position: absolute;
  margin-top: 80px;
  margin-left: 140px;
  color: #999999;
  font-size: 16px;
}

.BodyMoisture span {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
}

#edema {
  padding-top: 5%;
  margin-left: 40%;
  font-size: 18px;
  color: #666666;
}

#edema span {
  font-size: 50px;
}

#edemaType {
  margin-left: 40%;
  width: 500px;
  background: red;
}

#edemaType span {
  text-align: center;
  float: left;
  width: 120px;
}

#Nutritional {
  margin-left: 6%;
}

#Nutritional span {
  font-size: 25px;
  color: #2AB28B;
}

.everyRed {
  color: red;
}

.everyOrange {
  color: orange;
}

.everyBlack {
  color: #333333;
}

#analMan {
  margin-top: 2%;
  text-align: center;
  color: #fff;
  width: 60%;
  float: left;
}

#analMan #imgMan {
  float: left;
}

#analMan #imgFat {
  margin-left: 67%;
  width: 379px;
  height: 35px;
  line-height: 35px;
  background: #e88f73;
  opacity: 1;
  font-size: 16px;
}

#analMan #imgBone {
  margin-left: 67%;
  width: 379px;
  height: 53px;
  line-height: 53px;
  background: #b1d964;
  opacity: 1;
}

#analMan #imgProtein {
  margin-left: 67%;
  width: 379px;
  height: 53px;
  line-height: 53px;
  background: #e8ba73;
  opacity: 1;
}

#analMan #imgWater {
  margin-left: 67%;
  width: 379px;
  height: 193px;
  line-height: 193px;
  background: #6ba9e4;
  opacity: 1;
}

.biao1 {
  width: 25%;
  border-bottom: 1px solid rgb(9, 165, 120);
  border-right: 1px solid rgb(9, 165, 120);
  background-color: rgb(42, 178, 139);
  color: #fff;
}

.biao5 {
  width: 25%;
  border-right: 1px solid rgb(9, 165, 120);
  background-color: rgb(42, 178, 139);
  color: #fff;
}

.biao6 {
  width: 25%;
  border-right: 1px solid rgb(9, 165, 120);
  color: 000;
}

.biao2 {
  width: 25%;
  border-bottom: 1px solid rgb(9, 165, 120);
  border-right: 1px solid rgb(9, 165, 120);
  ;
}

.biao3 {
  width: 25%;
  border-bottom: 1px solid rgb(9, 165, 120);
 
}

.biao4 {
  width: 25%;
  border-bottom: 1px solid rgb(9, 165, 120);
}

.biao7 {
  width: 25%;
  color: #000;
}</style>
